<script setup lang="ts">
  import { PropType } from 'vue'
  import CustomTitle1 from './custom-title/Title1.vue'
  import CustomTitle2 from './custom-title/Title2.vue'
  import CustomTitle3 from './custom-title/Title3.vue'
  import CustomTitle4 from './custom-title/Title4.vue'
  import CustomTitle5 from './custom-title/Title5.vue'
  import CustomTitle6 from './custom-title/Title6.vue'
  import CustomTitle7 from './custom-title/Title7.vue'
  import CustomTitle8 from './custom-title/Title8.vue'
  import CustomTitle9 from './custom-title/Title9.vue'

  defineOptions({
    name: 'OrderCustomFormDivider',
  })

  const props = defineProps({
    title: {
      type: String,
      default: () => '这是标题',
    },
    desc: {
      type: String,
      default: () => '',
    },
    titleColor: {
      type: String,
      default: () => '#007cff',
    },
    dividerColor: {
      type: String,
      default: () => '#007cff',
    },
    style: {
      type: String as PropType<
        | 'style1'
        | 'style2'
        | 'style3'
        | 'style4'
        | 'style5'
        | 'style6'
        | 'style7'
        | 'style8'
        | 'style9'
      >,
      default: () => 'style3',
    },
  })
</script>

<template>
  <div class="custom-divider-container">
    <custom-title1
      v-if="props.style === 'style1'"
      :title="props.title"
      :desc="props.desc"
      :title-color="props.titleColor"
    />
    <custom-title2
      v-if="props.style === 'style2'"
      :title="props.title"
      :desc="props.desc"
      :title-color="props.titleColor"
      :divider-color="props.dividerColor"
    />
    <custom-title3
      v-if="props.style === 'style3'"
      :title="props.title"
      :desc="props.desc"
      :title-color="props.titleColor"
      :divider-color="props.dividerColor"
    />
    <custom-title4
      v-if="props.style === 'style4'"
      :title="props.title"
      :desc="props.desc"
      :title-color="props.titleColor"
      :divider-color="props.dividerColor"
    />
    <custom-title5
      v-if="props.style === 'style5'"
      :title="props.title"
      :desc="props.desc"
      :title-color="props.titleColor"
      :divider-color="props.dividerColor"
    />
    <custom-title6
      v-if="props.style === 'style6'"
      :title="props.title"
      :desc="props.desc"
      :title-color="props.titleColor"
      :divider-color="props.dividerColor"
    />
    <custom-title7
      v-if="props.style === 'style7'"
      :title="props.title"
      :desc="props.desc"
      :title-color="props.titleColor"
      :divider-color="props.dividerColor"
    />
    <custom-title8
      v-if="props.style === 'style8'"
      :title="props.title"
      :desc="props.desc"
      :title-color="props.titleColor"
      :divider-color="props.dividerColor"
    />
    <custom-title9
      v-if="props.style === 'style9'"
      :title="props.title"
      :desc="props.desc"
      :title-color="props.titleColor"
      :divider-color="props.dividerColor"
    />
  </div>
</template>

<style scoped lang="scss">
  .custom-divider-container {
    display: flex;
    flex-direction: column;
    width: 100%;

    .divider {
      border-bottom: 1px solid #000;
    }
  }
</style>
